<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" th:replace="~{layout/base :: layout(~{::title}, ~{::content}, ~{::css}, ~{::js})}">
<head>
    <title>笔记详情 - 笔记管理系统</title>
    <th:block th:fragment="css">
        <style>
            .note-detail {
                background: white;
                border-radius: 10px;
                padding: 30px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                margin-bottom: 20px;
            }
            .note-header {
                border-bottom: 1px solid #eee;
                padding-bottom: 20px;
                margin-bottom: 30px;
            }
            .note-title {
                font-size: 2rem;
                font-weight: 600;
                color: #333;
                margin-bottom: 15px;
                line-height: 1.3;
            }
            .note-meta {
                display: flex;
                flex-wrap: wrap;
                gap: 20px;
                color: #666;
                font-size: 0.9rem;
            }
            .meta-item {
                display: flex;
                align-items: center;
                gap: 5px;
            }
            .note-badges {
                margin-top: 15px;
            }
            .note-badges .badge {
                margin-right: 8px;
                font-size: 0.8rem;
            }
            .note-summary {
                background: #f8f9fa;
                border-left: 4px solid #007bff;
                padding: 15px 20px;
                margin-bottom: 30px;
                font-style: italic;
                color: #666;
            }
            .note-content {
                line-height: 1.8;
                font-size: 1.1rem;
                color: #333;
            }
            .note-content h1, .note-content h2, .note-content h3,
            .note-content h4, .note-content h5, .note-content h6 {
                margin-top: 30px;
                margin-bottom: 15px;
                color: #333;
            }
            .note-content p {
                margin-bottom: 15px;
            }
            .note-content blockquote {
                border-left: 4px solid #ddd;
                padding-left: 20px;
                margin: 20px 0;
                color: #666;
                font-style: italic;
            }
            .note-content pre {
                background: #f8f9fa;
                border: 1px solid #e9ecef;
                border-radius: 5px;
                padding: 15px;
                overflow-x: auto;
                margin: 20px 0;
            }
            .note-content img {
                max-width: 100%;
                height: auto;
                border-radius: 5px;
                margin: 20px 0;
            }
            .note-tags {
                margin-top: 30px;
                padding-top: 20px;
                border-top: 1px solid #eee;
            }
            .tag-item {
                display: inline-block;
                background: #007bff;
                color: white;
                padding: 5px 12px;
                margin: 3px;
                border-radius: 15px;
                font-size: 0.875rem;
                text-decoration: none;
            }
            .tag-item:hover {
                background: #0056b3;
                color: white;
            }
            .note-actions {
                background: white;
                border-radius: 10px;
                padding: 20px;
                box-shadow: 0 2px 10px rgba(0,0,0,0.1);
                text-align: center;
            }
            .action-buttons {
                display: flex;
                justify-content: center;
                gap: 15px;
                flex-wrap: wrap;
            }
            .like-button {
                transition: all 0.3s;
            }
            .like-button.liked {
                background: #dc3545;
                border-color: #dc3545;
                color: white;
            }
            .stats-row {
                display: flex;
                justify-content: center;
                gap: 30px;
                margin-bottom: 20px;
                font-size: 0.9rem;
                color: #666;
            }
            .stat-item {
                display: flex;
                align-items: center;
                gap: 5px;
            }
        </style>
    </th:block>
</head>
<body>
    <div th:fragment="content">
        <!-- 返回按钮 -->
        <div class="mb-4">
            <a href="/note" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-2"></i>返回列表
            </a>
        </div>

        <!-- 笔记详情 -->
        <div class="note-detail" id="noteDetail">
            <div class="note-header">
                <h1 class="note-title" th:text="${note.title}">笔记标题</h1>
                <div class="note-meta">
                    <div class="meta-item">
                        <i class="fas fa-folder"></i>
                        <span th:text="${note.categoryName ?: '未分类'}">分类名称</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-calendar"></i>
                        <span th:text="${#temporals.format(note.createTime, 'yyyy-MM-dd HH:mm')}">创建时间</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-edit"></i>
                        <span th:text="${#temporals.format(note.updateTime, 'yyyy-MM-dd HH:mm')}">更新时间</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-eye"></i>
                        <span th:text="${note.viewCount ?: 0}">0</span>
                        <span>次浏览</span>
                    </div>
                    <div class="meta-item">
                        <i class="fas fa-heart"></i>
                        <span th:text="${note.likeCount ?: 0}">0</span>
                        <span>次点赞</span>
                    </div>
                </div>
                <div class="note-badges">
                    <span th:if="${note.status == 1}" class="badge bg-success">已发布</span>
                    <span th:unless="${note.status == 1}" class="badge bg-secondary">草稿</span>
                    <span th:if="${note.isTop == 1}" class="badge bg-warning text-dark">置顶</span>
                    <span th:if="${note.isPublic == 1}" class="badge bg-info">公开</span>
                    <span th:unless="${note.isPublic == 1}" class="badge bg-dark">私有</span>
                </div>
            </div>
            
            <div th:if="${note.summary}" class="note-summary" th:text="${note.summary}">
                笔记摘要
            </div>
            
            <div class="note-content" th:utext="${note.content}">
                笔记内容
            </div>
            
            <div th:if="${note.tags != null and !note.tags.empty}" class="note-tags">
                <h6>标签：</h6>
                <a th:each="tag : ${note.tags}" th:href="@{/note(tagId=${tag.id})}" class="tag-item" th:text="${tag.tagName}">
                    标签
                </a>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="note-actions">
            <div class="stats-row" id="noteStats">
                <div class="stat-item">
                    <i class="fas fa-eye"></i>
                    <span th:text="${note.viewCount ?: 0}">0</span>
                    <span>浏览</span>
                </div>
                <div class="stat-item">
                    <i class="fas fa-heart"></i>
                    <span id="likeCount" th:text="${note.likeCount ?: 0}">0</span>
                    <span>点赞</span>
                </div>
                <div class="stat-item">
                    <i class="fas fa-calendar"></i>
                    <span th:text="${#temporals.format(note.createTime, 'yyyy-MM-dd')}">创建日期</span>
                </div>
            </div>
            <div class="action-buttons">
                <button class="btn btn-outline-danger like-button" id="likeButton" onclick="toggleLike()">
                    <i class="fas fa-heart me-1"></i>
                    <span id="likeText">点赞</span>
                </button>
                <a th:href="@{/note/edit/{id}(id=${note.id})}" class="btn btn-primary" id="editButton">
                    <i class="fas fa-edit me-1"></i>编辑
                </a>
                <button class="btn btn-outline-success" id="topButton" th:onclick="'toggleTop(' + ${note.id} + ', ' + ${note.isTop ?: 0} + ')'">
                    <i class="fas fa-thumbtack me-1"></i>
                    <span id="topText" th:text="${note.isTop == 1 ? '取消置顶' : '置顶'}">置顶</span>
                </button>
                <button class="btn btn-outline-info" id="publicButton" th:onclick="'togglePublic(' + ${note.id} + ', ' + ${note.isPublic ?: 0} + ')'">
                    <i class="fas fa-eye me-1"></i>
                    <span id="publicText" th:text="${note.isPublic == 1 ? '设为私有' : '设为公开'}">公开</span>
                </button>
                <button class="btn btn-outline-danger" th:onclick="'deleteNote(' + ${note.id} + ')'">
                    <i class="fas fa-trash me-1"></i>删除
                </button>
            </div>
        </div>
    </div>

    <th:block th:fragment="js">
        <script th:inline="javascript">
            /*<![CDATA[*/
            let noteId = [[${note.id}]] || 0;
            let noteData = {
                isTop: [[${note.isTop}]] || 0,
                isPublic: [[${note.isPublic}]] || 0
            };
            /*]]>*/

            // 切换点赞状态
            function toggleLike() {
                if (!noteId) {
                    showError('笔记ID无效');
                    return;
                }
                
                $.post('/note/like/' + noteId, function(data) {
                    if (data.code === 200) {
                        // 更新点赞数
                        let currentCount = parseInt($('#likeCount').text());
                        $('#likeCount').text(currentCount + 1);
                        
                        // 更新按钮状态
                        $('#likeButton').addClass('liked');
                        $('#likeText').text('已点赞');
                        
                        showSuccess('点赞成功');
                    } else {
                        showError('点赞失败：' + data.msg);
                    }
                }).fail(function() {
                    showError('点赞失败：网络错误');
                });
            }

            // 切换置顶状态
            function toggleTop(id, currentTop) {
                if (!id) {
                    showError('笔记ID无效');
                    return;
                }
                
                let isTop = currentTop === 1 ? 0 : 1;
                $.post('/note/top', {noteId: id, isTop: isTop}, function(data) {
                    if (data.code === 200) {
                        noteData.isTop = isTop;
                        if (isTop === 1) {
                            $('#topButton').removeClass('btn-outline-success').addClass('btn-success');
                            $('#topText').text('取消置顶');
                        } else {
                            $('#topButton').removeClass('btn-success').addClass('btn-outline-success');
                            $('#topText').text('置顶');
                        }
                        showSuccess(isTop ? '置顶成功' : '取消置顶成功');
                    } else {
                        showError('操作失败：' + data.msg);
                    }
                }).fail(function() {
                    showError('操作失败：网络错误');
                });
            }

            // 切换公开状态
            function togglePublic(id, currentPublic) {
                if (!id) {
                    showError('笔记ID无效');
                    return;
                }
                
                let isPublic = currentPublic === 1 ? 0 : 1;
                $.post('/note/public', {noteId: id, isPublic: isPublic}, function(data) {
                    if (data.code === 200) {
                        noteData.isPublic = isPublic;
                        if (isPublic === 1) {
                            $('#publicButton').removeClass('btn-outline-info').addClass('btn-info');
                            $('#publicText').text('设为私有');
                        } else {
                            $('#publicButton').removeClass('btn-info').addClass('btn-outline-info');
                            $('#publicText').text('设为公开');
                        }
                        showSuccess(isPublic ? '设为公开成功' : '设为私有成功');
                    } else {
                        showError('操作失败：' + data.msg);
                    }
                }).fail(function() {
                    showError('操作失败：网络错误');
                });
            }

            // 删除笔记
            function deleteNote(id) {
                if (!id) {
                    showError('笔记ID无效');
                    return;
                }
                
                if (confirm('确定要删除这篇笔记吗？删除后无法恢复！')) {
                    $.post('/note/remove', {ids: id}, function(data) {
                        if (data.code === 200) {
                            showSuccess('删除成功');
                            setTimeout(function() {
                                window.location.href = '/note';
                            }, 1000);
                        } else {
                            showError('删除失败：' + data.msg);
                        }
                    }).fail(function() {
                        showError('删除失败：网络错误');
                    });
                }
            }

            // 显示成功消息
            function showSuccess(message) {
                alert(message); // 简单实现，可以替换为更好的提示组件
            }

            // 显示错误消息
            function showError(message) {
                alert(message); // 简单实现，可以替换为更好的提示组件
            }
        </script>
    </th:block>
</body>
</html>